<div class="apes-trend-analysis">

  <div class="apes-trend-analysis-btn">
    <button apes-button [apesType]="'primary'" [apesSize]="'default'" (click)="exportExcel()">导出</button>
  </div>

  <ng-container *ngFor="let data of initData">

    <!--趋势分析-->
    <apes-card [apesTitle]="titleTemplate">
      <ng-template #titleTemplate>
        <div class="card-title">
          <div>{{data.name}}</div>
          <div class="tooltip"
               apes-tooltip
               [apesTooltipTitle]="tooltipTemplate"
               apesTooltipPlacement="right">
            <ng-template #tooltipTemplate>
              <div style="white-space:pre-line;">{{data.tooltip}}</div>
            </ng-template>
            <i apes-icon apesType="info-circle"></i>
          </div>
        </div>
      </ng-template>

      <!--查询区-->
      <div apes-row [apesGutter]="16" class="apes-item" style="padding: 8px;">
        <formly-form [model]="data.model" [fields]="data.field"></formly-form>
        <!--        <button apes-button [apesSize]="'default'" (click)="refreshChartsData(data,'default')">刷新</button>-->
      </div>
      <div apes-row [apesGutter]="16" class="apes-item" style="padding: 8px;">
        <div apes-col [apesSpan]="6">
          <ng-container *ngIf="platform == 'zt'">
            <button apes-button [apesSize]="'default'" style="margin-left: 16px;" (click)="refreshChartsData(data,'year')">本年度</button>
            <button apes-button [apesSize]="'default'" (click)="refreshChartsData(data,'halfYear')">半年度</button>
            <button apes-button [apesSize]="'default'" (click)="refreshChartsData(data,'quarter')">当前季度</button>
            <button apes-button [apesSize]="'default'" (click)="refreshChartsData(data,'lastMonth')">上月</button>
            <button apes-button [apesSize]="'default'" (click)="refreshChartsData(data,'thisMonth')">当月</button>
          </ng-container>
          <ng-container *ngIf="platform == 'fn'">
            <button apes-button [apesSize]="'default'" style="margin-left: 16px;" (click)="refreshChartsData(data,'lastMonth')">上月</button>
            <button apes-button [apesSize]="'default'" (click)="refreshChartsData(data,'thisMonth')">当月</button>
            <button apes-button [apesSize]="'default'" (click)="refreshChartsData(data,'lastWeek')">上周</button>
            <button apes-button [apesSize]="'default'" (click)="refreshChartsData(data,'nearlyDay')">近7天</button>
            <button apes-button [apesSize]="'default'" (click)="refreshChartsData(data,'nowDay')">今天</button>
          </ng-container>
        </div>
        <div apes-col [apesSpan]="6">
          <formly-form [model]="data.model" [fields]="data.timeField"></formly-form>
        </div>
        <div apes-col [apesSpan]="6">
          <button apes-button [apesSize]="'default'" [apesType]="'primary'" (click)="refreshChartsData(data,'default')">刷新</button>
        </div>
      </div>

      <!--展示区-->
      <div apes-row [apesGutter]="16">
        <div apes-col [apesSpan]="24">
          <div style="padding: 0 16px;">
            <apes-tabset [apesType]="'card'">

              <apes-tab [apesTitle]="chartsTemplate">
                <ng-template #chartsTemplate>
                  <i apes-icon apesType="bar-chart" class="tabSet-icon"></i>
                </ng-template>
                <apes-charts [id]="data.id" [data]="data['data']" [option]="data['option']"
                             [loading]="data['loading']"></apes-charts>
              </apes-tab>

              <apes-tab [apesTitle]="tableTemplate">
                <ng-template #tableTemplate>
                  <i apes-icon apesType="table" class="tabSet-icon"></i>
                </ng-template>
                <apes-table #basicTable
                            apesBordered
                            apesSize="small"
                            class="tabSet-table"
                            [apesScroll]="{ x: '30vw',y: '600px' }"
                            [apesFrontPagination]="false"
                            [apesShowPagination]="false"
                            [apesLoading]="data['loading']"
                            [apesData]="data['rowData']">
                  <thead>
                  <tr>
                    <th *ngFor="let col of data['colField'],let i = index;"
                        class="table-th-fixed"
                        [apesAlign]="'center'"
                        [apesLeft]="i == 0? '0px' : null">
                      {{col}}
                    </th>
                  </tr>
                  </thead>
                  <tbody>

                  <tr *ngFor="let item of basicTable.data">
                    <td *ngFor="let col of data['colField'],let i = index;"
                        class="table-th-fixed"
                        [apesAlign]="'center'"
                        [apesLeft]="i == 0? '0px' : null">{{item[col]}}</td>
                  </tr>
                  </tbody>
                </apes-table>
              </apes-tab>

            </apes-tabset>
            <div class="apes-trend-analysis-note">
              <div>
                <span class="note-padding">环比 : 本期环比 </span>
                <span class="note-padding" style="font-weight: bold">增长（下降）率(%) = (本期价格/上期价格 — 1 )× 100% </span>
                <span *ngIf="platform == 'zt'"> 说明:如果本期指本月和本年，则上期相应指上月和上年。</span>
                <span *ngIf="platform != 'zt'"> 说明:如果本期指本日、本周、本月和本年，则上期相应指上日、上周、上月和上年。</span>
              </div>
              <div>
                <span class="note-padding">同比 : 本期同比 </span>
                <span class="note-padding" style="font-weight: bold">增长（下降）率(%) = (本期价格/上年同期价格 —1) × 100% </span>
                <span *ngIf="platform == 'zt'"> 说明 : 如果本期指本月，则上年同期相应指上年同月。</span>
                <span *ngIf="platform != 'zt'"> 说明 : 如果本期指本日、本周和本月，则上年同期相应指上年同日、上年同周和上年同月。</span>

              </div>
            </div>
          </div>
        </div>
      </div>

    </apes-card>

  </ng-container>

</div>


